$class-name: 'moffice';
@import 'root-style';

// element ui button

//default
.#{$class-name}-el-button {
    background: var(#{$class-prefix}-button-bg-color);
    color: var(#{$class-prefix}-button-text-color);
    border: 1px solid var(#{$class-prefix}-button-border-color);
    padding: 10px 34px;
    border-radius: 4px;
    font-size: 18px;
    line-height: 30px;
    min-height: 50px;
    font-weight: 400;

    &:hover {
        background: var(#{$class-prefix}-button-hover-bg-color);
        color: var(#{$class-prefix}-button-hover-text-color);
        border: 1px solid var(#{$class-prefix}-button-hover-border-color);
    }

    &.is-disabled {
        background: var(#{$class-prefix}-button-disabled-bg-color);
        color: var(#{$class-prefix}-button-disabled-text-color);
        border: 1px solid var(#{$class-prefix}-button-disabled-border-color);

        &:hover {
            background: var(#{$class-prefix}-button-disabled-bg-color);
            color: var(#{$class-prefix}-button-disabled-text-color);
            border: 1px solid var(#{$class-prefix}-button-disabled-border-color);
        }
    }
}

.#{$class-name}-el-button-h28 {
    font-size: 14px;
    padding: 6px 24px;
    min-height: 28px;
    height: 28px;
}

.#{$class-name}-el-button-h32 {
    font-size: 14px;
    padding: 8px 24px;
    min-height: 32px;
}

.#{$class-name}-el-button-h36 {
    font-size: 14px;
    padding: 7px 24px;
    min-height: 36px;
}

//primary
.#{$class-name}-el-button--primary {
    background: var(#{$class-prefix}-button-primary-bg-color);
    color: var(#{$class-prefix}-button-primary-text-color);
    border: 1px solid var(#{$class-prefix}-button-primary-border-color);

    &:hover {
        background: var(#{$class-prefix}-button-primary-hover-bg-color);
        color: var(#{$class-prefix}-button-primary-hover-text-color);
        border: 1px solid var(#{$class-prefix}-button-primary-hover-border-color);
    }

    &.is-disabled {
        background: var(#{$class-prefix}-button-disabled-primary-bg-color);
        color: var(#{$class-prefix}-button-disabled-primary-text-color);
        border: 1px solid var(#{$class-prefix}-button-disabled-primary-border-color);

        &:hover {
            background: var(#{$class-prefix}-button-disabled-primary-bg-color);
            color: var(#{$class-prefix}-button-disabled-primary-text-color);
            border: 1px solid var(#{$class-prefix}-button-disabled-primary-border-color);
        }
    }

    &:active {
        background: var(#{$class-prefix}-button-primary-bg-color);
        color: var(#{$class-prefix}-button-primary-text-color);
        border: 1px solid var(#{$class-prefix}-button-primary-border-color);

    }

    &:focus {
        background: var(#{$class-prefix}-button-primary-bg-color);
        color: var(#{$class-prefix}-button-primary-text-color);
        border: 1px solid var(#{$class-prefix}-button-primary-border-color);

    }
}

//info
.#{$class-name}-el-button--info {
    background: var(#{$class-prefix}-button-info-bg-color);
    color: var(#{$class-prefix}-button-info-text-color);
    border: 1px solid var(#{$class-prefix}-button-info-border-color);

    &:hover {
        background: var(#{$class-prefix}-button-info-hover-bg-color);
        color: var(#{$class-prefix}-button-info-hover-text-color);
        border: 1px solid var(#{$class-prefix}-button-info-hover-border-color);
    }

    &.is-disabled {
        background: var(#{$class-prefix}-button-disabled-info-bg-color);
        color: var(#{$class-prefix}-button-disabled-info-text-color);
        border: 1px solid var(#{$class-prefix}-button-disabled-info-border-color);

        &:hover {
            background: var(#{$class-prefix}-button-disabled-info-bg-color);
            color: var(#{$class-prefix}-button-disabled-info-text-color);
            border: 1px solid var(#{$class-prefix}-button-disabled-info-border-color);
        }
    }
}

//link
.#{$class-name}-el-button--link {
    background-color: transparent;
    color: var(#{$class-prefix}-button-link-color);
    border: 0px solid transparent;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: var(#{$class-prefix}-button-link-hover-color);
        border: 0px solid transparent;
    }

    &.is-disabled {
        background-color: transparent;
        color: var(#{$class-prefix}-button-disabled-info-text-color);
        border: 0px solid transparent;

        &:hover {
            background-color: transparent;
            color: var(#{$class-prefix}-button-disabled-info-text-color);
            border: 0px solid transparent;
        }
    }

    &:focus {
        background-color: transparent;
        color: var(#{$class-prefix}-button-link-color);
        border: 0px solid transparent;
        border: 0px solid transparent;

    }
}

//link-underline
.#{$class-name}-el-button--link-underline {
    text-decoration: underline;
    background-color: transparent;
    color: var(#{$class-prefix}-button-primary-link-color);
    border: 0px solid transparent;

    &:hover {
        background-color: transparent;
        color: var(#{$class-prefix}-button-primary-hover-bg-color);
        border: 0px solid transparent;
    }

    &.is-disabled {
        background-color: transparent;
        color: var(#{$class-prefix}-button-disabled-info-text-color);
        border: 0px solid transparent;

        &:hover {
            background-color: transparent;
            color: var(#{$class-prefix}-button-disabled-info-text-color);
            border: 0px solid transparent;
        }
    }

    &:focus {
        text-decoration: underline;
        background-color: transparent;
        color: var(#{$class-prefix}-button-primary-link-color);
        border: 0px solid transparent;

    }
}

// bottom select
.#{$class-name}-bottom-select {
    .el-input {
        .el-input__wrapper {
            border-radius: 0;
            box-shadow: none;
            border-bottom: 1px solid var(#{$class-prefix}-color-gray-auxiliary3);

            &.is-focus {
                box-shadow: none !important;

                .el-input__wrapper {
                    box-shadow: none !important;
                }
            }

            .el-input__inner {
                color: var(#{$class-prefix}-color-black);
            }

            input::-webkit-input-placeholder {
                color: var(#{$class-prefix}-color-black);
            }

            input::-moz-placeholder {
                /* Mozilla Firefox 19+ */

                color: var(#{$class-prefix}-color-black);
            }

            input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */

                color: var(#{$class-prefix}-color-black);
            }

            input:-ms-input-placeholder {
                /* Internet Explorer 10-11 */

                color: var(#{$class-prefix}-color-black);
            }
        }

        &.is-disabled .el-input__wrapper {
            background-color: var(#{$class-prefix}-color-white);

            &:hover {
                box-shadow: none;
            }

            .el-input__suffix {
                visibility: hidden;
            }
        }

        // .el-select__caret{
        //     color: var(#{$class-prefix}-color-black);
        // }
        .el-select__caret {
            width: 10px;
            height: 10px;
            background: url(~@/assets/img/select-icon.png) no-repeat center center;
            transform: rotateZ(360deg);

            &.el-icon {
                height: 10px;
            }

            &.is-reverse {
                transform: rotateZ(180deg);
            }

            svg {
                display: none;
            }
        }
    }

    &:hover:not(.el-select--disabled) .el-input__wrapper {
        box-shadow: none;
    }
}

// Bottom  srt-el-button--cancel
.#{$class-name}-el-button--cancel {
    color: var(#{$class-prefix}-button-cancel-color);
    border: 1px solid var(#{$class-prefix}-button-cancel-border-color);

    &:hover {
        background-color: transparent;
        color: var(#{$class-prefix}-button-cancel-hover-color);
        border: 1px solid var(#{$class-prefix}-button-cancel-hover-border-color);
    }

    &.is-disabled {
        background-color: transparent;
        color: var(#{$class-prefix}-button-cancel-disabled-color);
        border: 1px solid var(#{$class-prefix}-button-cancel-border-color);

        &:hover {
            border: 1px solid var(#{$class-prefix}-button-cancel-border-color);
            background-color: transparent;
            color: var(#{$class-prefix}-button-cancel-disabled-color);

        }
    }

}


// select popper
.#{$class-name}-select-popper {
    box-shadow: 0px 0px 10px 0px rgba(0, 80, 168, 0.16);
    top: 44px !important;

    .el-popper__arrow {
        &::before {
            content: '';
            display: none;
        }
    }

    .el-select-dropdown__item {
        color: var(#{$class-prefix}-color-black);
        font-size: 14px;
        height: 40px;
        line-height: 40px;

        &:hover {
            background-color: var(#{$class-prefix}-select-conetnt-hover-bg-color);
        }

        &.selected {
            background-color: var(#{$class-prefix}-select-conetnt-hover-bg-color);
            font-weight: 400;
        }
    }
}

//  select
.#{$class-name}-select {
    .el-input__wrapper {
        border: 1px solid var(#{$class-prefix}-select-border-color);
        box-shadow: none;

        &.is-focus {
            box-shadow: none !important;

            .el-input__wrapper {
                box-shadow: none !important;
            }
        }

        .el-input__inner {
            color: var(#{$class-prefix}-color-black);
        }

        .el-input__inner {
            color: var(#{$class-prefix}-color-black);
        }

        input::-webkit-input-placeholder {
            color: var(#{$class-prefix}-color-black);
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */

            color: var(#{$class-prefix}-color-black);
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */

            color: var(#{$class-prefix}-color-black);
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */

            color: var(#{$class-prefix}-color-black);
        }
    }

    .el-input.is-disabled .el-input__wrapper {
        background-color: var(#{$class-prefix}-select-disabled-bg-color);
        box-shadow: none;

        &:hover {
            box-shadow: none;
        }

        .el-input__suffix {
            visibility: hidden;
        }
    }

    &:hover:not(.el-select--disabled) .el-input__wrapper {
        box-shadow: none;
        border: 1px solid var(#{$class-prefix}-select-hover-border-color);
    }

    // .el-input .el-select__caret{
    //     color: var(#{$class-prefix}-color-black);
    // }
    .el-input .el-select__caret {
        width: 10px;
        height: 10px;
        background: url(~@/assets/img/select-icon.png) no-repeat center center;
        transform: rotateZ(360deg);

        &.el-icon {
            height: 10px;
        }

        &.is-reverse {
            transform: rotateZ(180deg);
        }

        svg {
            display: none;
        }
    }
}




// input
.#{$class-name}-el-input {
    .el-input__wrapper {
        border: 1px solid var(#{$class-prefix}-input-border-color);
        box-shadow: none !important;
        padding: 0 11px;

        &.is-focus {
            border: 1px solid var(#{$class-prefix}-input-focus-border-color);
            box-shadow: none !important;

            .el-input__suffix {
                color: var(#{$class-prefix}-input-focus-border-color);
            }
        }

        .el-input__inner {
            color: var(#{$class-prefix}-input-text-color);
            height: 40px;
        }
    }

    .el-form-item__error {
        color: var(#{$class-prefix}-input-error-color);
    }

    &.is-disabled .el-input__wrapper {
        box-shadow: none;
        background-color: var(#{$class-prefix}-input-disabled-bg-color);
    }
}

// .el-form-item err color
.#{$class-name}-el-input-item.is-error .el-input__wrapper {
    box-shadow: none;
    border: 1px solid var(#{$class-prefix}-input-error-color);
}

.#{$class-name}-el-input-item-no-border.is-error .el-input__wrapper {
    box-shadow: none;
    border-bottom: 1px solid var(#{$class-prefix}-input-error-color);
}

.#{$class-name}-el-input-no-border {

    .el-input__wrapper {
        border: none;
        border-bottom: 1px solid var(#{$class-prefix}-input-border-color);
        box-shadow: none;
        border-radius: 0;

        &.is-error .el-input__wrapper {
            border: none !important;
        }

        &.is-focus {
            border-bottom: 1px solid var(#{$class-prefix}-input-focus-border-color);

            .el-input__suffix {
                color: var(#{$class-prefix}-input-focus-border-color);
            }
        }

        .el-input__inner {
            color: var(#{$class-prefix}-input-text-color);
        }
    }

    .el-form-item__error {
        color: var(#{$class-prefix}-input-error-color);
    }

    &.is-disabled .el-input__wrapper {
        box-shadow: none;
        background-color: var(#{$class-prefix}-input-disabled-bg-color);
    }


}

// el-checked
.#{$class-name}-el-checkbox {
    height: auto !important;

    .el-checkbox__label {
        color: var(#{$class-prefix}-checkbox-text-color);
    }

    &.is-checked {
        .el-checkbox__label {
            color: var(#{$class-prefix}-checkbox-text-color) !important;

        }
    }

    &.is-disabled.is-checked .el-checkbox__inner {
        background-color: var(#{$class-prefix}-checkbox-active-disabled-border-bg-color);

        &::after {
            border-color: var(#{$class-prefix}-color-white);
        }

    }

    &.is-disabled.is-checked .el-checkbox__inner::after {
        background-color: var(#{$class-prefix}-checkbox-active-disabled-border-bg-color);

        ::after {
            border-color:var(#{$class-prefix}-color-white);
        }

    }

    .el-checkbox__input.is-disabled+span.el-checkbox__label {
        color: var(#{$class-prefix}-checkbox-text-color);

    }

    .el-checkbox__input.is-disabled+span.el-checkbox__label {
        color: var(#{$class-prefix}-checkbox-disabled-text-color);
    }


}

// el-radio
.#{$class-name}-el-radio {
    .el-radio__input.is-checked .el-radio__inner {
        background: transparent;
        border: 1px solid var(#{$class-prefix}-radio-active-border-color);

        &::after {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            text-align: center;
            display: block;
            position: absolute;
            top: 50%;
            left: 48%;
            transform: translate(-41%, -48%);
            background: #0084F6;


        }
    }

    .el-radio__label {
        color: var(#{$class-prefix}-checkbox-text-color);
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: var(#{$class-prefix}-checkbox-text-color);
        background: transparent;
    }

    .el-radio__input.is-disabled.is-checked .el-radio__inner {
        background: var(#{$class-prefix}-checkbox-active-disabled-border-bg-color)
    }



}

// stripe-table
.#{$class-name}-stripe-table {
    color: var(--srt-main-text-color);

    thead th {
        color: var(--srt-color-gray);
        height: 40px;
        font-size: 14px;
        font-weight: normal;
        background-color: var(--srt-table-header-bg-color) !important;
    }

    .el-table__row {
        height: 70px;
    }

    tr.el-table__row--striped td.el-table__cell {
        background: var(--srt-table-header-bg-color) !important;
    }

    .el-button--primary.is-link {
        color: var(--srt-main-active-text-color);
    }

    // td.el-table__cell, th.el-table__cell.is-leaf {
    //     border: 0;
    // }
}